<template>
    <div class="revoke-order">
        <h1 style="font-size: 23px;">已撤销订单</h1>
        <el-divider></el-divider>

        <div class="select-count">
            <span class="count">
                <font-awesome-icon :icon="['fas', 'list']" />
                当前已选中 <span class="number">{{ selectedCount }}</span> 笔订单
            </span>
            <el-button type="danger" plain round :disabled="selectedCount <= 0" @click="deleteSelected">删除所选订单</el-button>
        </div>

        <!-- 表格 -->
        <el-table v-loading="loading" :data="orderList" style="width: 100%" @selection-change="handleSelectionChange"
            ref="tableRef">
            <el-table-column type="selection" width="43" />

            <el-table-column type="expand">
                <!-- 展开行 -->
                <template #default="props">
                    <div style="background: #f6f1ee80; border: 1px solid #92929246;">
                        <div class="expand-row">
                            <!-- 订单详情 -->
                            <h1 class="title">订单详情：</h1>

                            <!-- 订单内容 -->
                            <el-table :data="props.row.orderItemList" :border="true">
                                <el-table-column label="商品图片" align="center">
                                    <template v-slot="scope">
                                        <img :src="img_url_pre(scope.row.commodity.pictures[0])" class="commodity-img"
                                            @dragstart.prevent alt="商品图片"
                                            style="border-radius: 5px; height: 85px; width: 85px;" />
                                    </template>
                                </el-table-column>
                                <el-table-column label="商品名称" align="center">
                                    <template v-slot="scope">
                                        {{ scope.row.commodity.commodityName }}
                                    </template>
                                </el-table-column>
                                <el-table-column label="商品单价 / 元" align="center">
                                    <template v-slot="scope">
                                        {{ scope.row.commodity.price }}
                                    </template>
                                </el-table-column>
                                <el-table-column label="购买数量" prop="commodityNum" align="center" />
                                <el-table-column label="商品总额 / 元" align="center">
                                    <template v-slot="scope">
                                        {{ (scope.row.commodityNum * scope.row.commodity.price).toFixed(2) }}
                                    </template>
                                </el-table-column>
                            </el-table>

                            <!-- 金额相关 -->
                            <div class="total">
                                商品总价：￥
                                <span class="amount">{{ props.row.originSum.toFixed(2) }}</span>
                            </div>
                            <div class="actual-pay">
                                实付款：￥
                                <span class="amount">未支付</span>
                            </div>

                            <el-divider></el-divider>

                            <!-- 收货信息 -->
                            <div class="address-info">
                                <p class="address-info-title">
                                    <font-awesome-icon :icon="['fas', 'location-dot']" />
                                    收货信息：
                                </p>
                                <el-card shadow="hover" style="margin-bottom: 5px; margin-top: 5px;">
                                    <!-- 信息展示 -->
                                    <div class="name-phone">
                                        <span class="name">{{ addressList[props.$index].name }}</span>
                                        <span class="phone-number">{{ addressList[props.$index].phoneNumber }}</span>
                                        <el-tag class="tag" size="small">{{ addressList[props.$index].tag }}</el-tag>
                                    </div>
                                    <div class="addr">
                                        <span>{{ addressList[props.$index].province }}</span>&emsp13;
                                        <span>{{ addressList[props.$index].city }}</span>&emsp13;
                                        <span>{{ addressList[props.$index].district }}</span>&emsp13;
                                        <span>{{ addressList[props.$index].detail }}</span>
                                    </div>
                                </el-card>
                            </div>

                            <!-- 订单备注 -->
                            <div class="moreinfo">
                                <p class="moreinfo-title">
                                    <font-awesome-icon :icon="['fas', 'clipboard']" />
                                    订单备注：
                                </p>
                                <el-input readonly v-model="props.row.moreInfo"></el-input>
                            </div>

                            <div class="order-id">
                                订单编号：<span class="light-font">{{ props.row.orderId }}</span>
                            </div>

                            <!-- 订单相关的时间 -->
                            <div class="time">
                                创建时间：<span class="light-font">{{ props.row.createTime }}</span>
                            </div>
                        </div>
                    </div>
                </template>
            </el-table-column>

            <el-table-column label="订单ID" prop="orderId" width="190" />
            <el-table-column label="商店ID" prop="storeId" width="190" />
            <el-table-column label="下单时间" prop="createTime" width="180" />
            <el-table-column label="订单金额 / 元" prop="originSum">
                <template v-slot="scope">
                    {{ scope.row.originSum.toFixed(2) }}
                </template>
            </el-table-column>
            <el-table-column label="订单操作" prop="status" width="90">
                <el-button type="info" size="small" plain>操作</el-button>
            </el-table-column>
        </el-table>

        <!-- 分页 -->
        <el-pagination background layout="prev, pager, next" :total="config.total" class="pager mt-4"
            @current-change="changePage" :page-size="config.size" />
    </div>
</template>

<script setup>
import { reactive, ref, getCurrentInstance, onMounted } from 'vue'
import img_url_pre from '../../../../utils/img_url_filter'

const { proxy } = getCurrentInstance();
let config = reactive({
    total: 0,  // 总的条目数
    current: 1,  // 当前页
    size: 15  // 一页的条目数
});
// 控制表格加载遮罩窗是否出现
let loading = ref(false);
let orderList = ref([]);
const addressList = ref([]);
const selectedCount = ref(0);  // 当前选中的行数
const tableRef = ref();

/**
 * 翻页操作
 * @param {number} page 目标页码
 */
const changePage = async (page) => {
    loading.value = true;
    // 更新当前页码
    config.current = page;
    await getPageOfOrderRevoke();
    loading.value = false;
}

/**
 * 获取用户的所有订单
 */
const getPageOfOrderRevoke = async () => {
    // 发起请求
    let res = await proxy.$api.order.getOrderOfUser(4, { current: config.current, size: config.size });
    // 更新表格数据
    orderList.value = res.data.orderList;
    config.total = res.data.total;
    addressList.value = [];
    for (let i = 0; i < orderList.value.length; ++i) {
        let res = await proxy.$api.address.getAddress(orderList.value[i].addressId);
        addressList.value.push(res.data);
    }
}

/**
 * 表格多选发生变化
 */
const handleSelectionChange = () => {
    if (tableRef.value) {
        selectedCount.value = tableRef.value.getSelectionRows().length
    }
}

/**
 * 删除选中的订单
 */
const deleteSelected = async () => {
    let ans = await ElMessageBox.confirm(
        '删除后订单记录将无法找回，确认删除订单吗？',
        '确认删除',
        {
            confirmButtonText: '确认',
            cancelButtonText: '取消',
            type: 'warning',
        }
    );

    if (ans === 'confirm') {
        loading.value = true;

        let orderIdList = [];
        tableRef.value.getSelectionRows().forEach(order => { orderIdList.push(order.orderId) });
        let ret = await proxy.$api.order.deleteOrder({ orderIdList: orderIdList });
        if (ret.status === 200) {
            await getPageOfOrderRevoke();
            loading.value = false;
            ElMessage.success({ showClose: true, message: "成功删除选中的订单" })
        }
    }
}

onMounted(async () => {
    // 开启加载遮罩
    loading.value = true;
    await getPageOfOrderRevoke();
    loading.value = false;
})
</script>

<style lang="less" scoped>
.revoke-order {
    background: linear-gradient(180deg, #ecf0f5ee 0%, #ffffffea 100%);
    padding: 30px;
    border-radius: 10px;

    /* 分割线 */

    .el-divider {
        border-top: 2px solid rgba(170, 165, 165, 0.651);
    }

    .select-count {
        display: flex;
        align-items: center;
        margin-bottom: 20px;
        padding-left: 5px;

        .count {
            margin-right: 20px;

            .number {
                font-size: 18px;
            }
        }
    }

    .expand-row {
        width: 94%;
        margin: 0 auto 0 auto;
        padding: 15px 20px 30px 20px;
        // background: red;

        .title {
            font-size: 18px;
            margin-bottom: 15px;
            color: black;
        }

        .total {
            font-size: 15px;
            margin-top: 10px;
            line-height: 35px;

            .amount {
                font-size: 15px;
                color: black;
            }
        }

        .allowance {
            font-size: 15px;
            margin-top: 10px;
            line-height: 35px;

            .amount {
                font-size: 15px;
                color: #ff3e28;
            }
        }

        .actual-pay {
            font-size: 15px;
            margin-top: 7px;
            line-height: 35px;

            .amount {
                font-size: 23px;
                color: #ff3e28;
            }
        }

        .address-info {
            .address-info-title {
                font-size: 15px;
                line-height: 35px;
            }

            .name-phone {
                display: flex;
                align-items: center;

                .name {
                    font-size: 16px;
                }

                .phone-number {
                    font-size: 15px;
                    margin-left: 10px;
                }

                .tag {
                    margin-left: 10px;
                }
            }

            .addr {
                margin-top: 15px;
                font-size: 15px;
                color: rgb(147, 150, 152);
                line-height: 23px;
            }
        }

        .moreinfo {
            margin-top: 15px;

            .moreinfo-title {
                font-size: 15px;
                line-height: 35px;
                margin-bottom: 5px;
            }
        }

        .order-id {
            font-size: 15px;
            margin-top: 14px;
            line-height: 35px;

            .light-font {
                color: #989898;
            }
        }

        .bill-id {
            font-size: 15px;
            margin-top: 7px;
            line-height: 35px;

            .light-font {
                color: #989898;
            }
        }

        .time {
            font-size: 15px;
            margin-top: 7px;
            line-height: 35px;

            .light-font {
                color: #989898;
            }
        }
    }

    .pager {
        position: relative;
        bottom: -15px;
        justify-content: flex-end;
        margin-right: 15px;
        margin-top: 10px;
        margin-bottom: 15px;
    }
}
</style>
